<template>
  <div>
    <div class="map">
      <baidu-map
        class="mapId"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
        @ready="readyMap"
      >
        <!--      //页面的打点显示-->
        <bm-point-collection
          :points="points"
          shape="BMAP_POINT_SHAPE_STAR"
          color="red"
          size="BMAP_POINT_SIZE_SMALL"
          @click="clickHandler"
        >
        </bm-point-collection>

        <!--      //地理位置的搜索功能-->
        <bm-local-search
          :keyword="keyword"
          :auto-viewport="true"
          :location="location"
        ></bm-local-search>

        <!--      //缩放比例尺的展示-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

        <!--      //定位-->
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>

        <!--      //添加一个小红点的，并将当前的经纬度写入数据中-->
        <bm-marker  v-for="item in maps" 
                    :icon="{url: require('@/assets/51.png'),
                     size: {width: 35, height: 35}}"
                    :key="item.id" 
                    :position="{ lng: item.longitude, lat: item.latitude}"></bm-marker>

        <!-- 箭头折线 -->
        <new-polyline
          v-if="points && points.length >= 2 && checkPoints({ points })"
          :path="points"
          :icons="icons"
          stroke-color="#0091ea"
          :stroke-opacity="0.8"
          :stroke-weight="10"
        ></new-polyline>
      </baidu-map>
    </div>
  </div>
</template>
<script>
import newPolyline from "./new_polyline";
import BMapGL from 'vue-baidu-map-gl';
export default {
  components:{
    newPolyline
  },
  data() {
    return {
      center: {
        lng: 116.404,
        lat: 39.915,
      }, //初始的中心位置
      zoom: 12, //缩放级别
      points: [], //打点的地方
      //百度地图初始化数据
      baidumapSwitch: false,
      location: "",
      keyword: "",
      icons:[],
      maps:[],
      nowStationId: '',
    };
  },
  mounted() {
    this.addPoints();
  },
  methods: {
    //地图实例:初始化加载地图
    readyMap({ BMap, map }) {
      this.getTreePath();
      this.getMapData();
      var sy = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_OPEN_ARROW, {
        scale: 0.5, // 图标缩放大小
        strokeColor: "#fff", // 设置矢量图标的线填充颜色
        strokeWeight: "3" // 设置线宽
      });
      console.log(sy,"sy");
      var icons = new BMap.IconSequence(sy,'5%','15%');
      console.log(icons,"icons");
      this.icons.push(icons);
      var bmap = new BMapGL.Map("map"); // 创建Map实例
      bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 12); // 初始化地图,设置中心点坐标和地图级别
      bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      var path = [
        {
          lng: 116.297611,
          lat: 40.047363,
        },
        {
          lng: 116.302839,
          lat: 40.048219,
        },
        {
          lng: 116.308301,
          lat: 40.050566,
        },
        {
          lng: 116.305732,
          lat: 40.054957,
        },
        {
          lng: 116.304754,
          lat: 40.057953,
        },
        {
          lng: 116.306487,
          lat: 40.058312,
        },
        {
          lng: 116.307223,
          lat: 40.056379,
        },
      ];
      var pointLine = [];
      for (var i = 0; i < path.length; i++) {
        pointLine.push(new BMapGL.Point(path[i].lng, path[i].lat));
      }
      var pl = new BMapGL.Polyline(pointLine);
      // setTimeout(this.start, 3000);
      this.start()
    },
    start() {
        trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
          overallView: true,
          tilt: 30,
          duration: 20000,
          delay: 300,
        });
        trackAni.start();
    },

    getTreePath() {
      this.center.lng = 114.52785300795644
      this.center.lat = 38.14758574827796
      this.nowStationId = '1'
    },
    getMapData() {
      this.points = [];
      this.maps = [
        {
          "id": "1",
          "name": "站点名称站点名称站点名称站点名称站点名称",
          "longitude": 114.52785300795644,
          "latitude": 38.14758574827796,
        },
        {
          "id": "2",
          "name": "站点名称2",
          "longitude": 114.54050114953694,
          "latitude": 38.13759635572114,
        },
        {
          "id": "3",
          "name": "站点名称3",
          "longitude": 114.56579743269792,
          "latitude": 38.12419932394176,
        },
        {
          "id": "4",
          "name": "站点名称4",
          "longitude": 114.5908781225365,
          "latitude": 38.12056580319661,
        },
        {
          "id": "5",
          "name": "站点名称5",
          "longitude": 114.6115750814864,
          "latitude": 38.11613720325717,
        },
        {
          "id": "6",
          "name": "站点名称6",
          "longitude": 114.63838051790414,
          "latitude": 38.11556941444744,
        },
        {
          "id": "7",
          "name": "站点名称7",
          "longitude": 114.68336765784383,
          "latitude": 38.10284977850926,
        }
      ]
      for (var i in this.maps) {
        this.points.push(
          {
            lng: this.maps[i].longitude,
            lat: this.maps[i].latitude
          }
        )
      }
    },
    clickHandler(e) {
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
      this.zoom = e.target.getZoom();
    },
    //添加海量点
    addPoints() {
      const points = [];
      for (var i = 0; i < n; i++) {
        const position = {
          lng: Math.random() * 40 + 85,
          lat: Math.random() * 30 + 21,
        };
        points.push(position);
      }
      this.points = points;
    },
    // 折线
    checkPoints({ points }) {
      // 拿到第一组点
      var originPoint = points[0];
      // 将第一组点与后续点进行对比 如果坐标集合中只有一组实际坐标点则return false
      // 只要坐标集合中有两组不同的实际坐标点,则return true
      for (var i = 1; i < points.length; i++) {
        if (
          points[i].lat !== originPoint.lat ||
          points[i].lng !== originPoint.lng
        ) {
          return true;
        }
      }
      return false;
    },
  },
};
</script>
<style lang="scss" scoped>
.map {
  background-color: #32d0ab;
  .mapId {
    height: 800px;
    width: 100%;
  }
}
</style>